<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>朋友圈搞笑文案</title>
    <link rel="stylesheet" href="../css/all.min.css">
    <script src="../js/html2canvas.min.js"></script>
    <style type="text/css">
        @font-face {
            font-family: 'MyFont';
            src: url('../font/MyFont-Regular.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }
    </style>
</head>
<body style="margin: 0; padding: 0; box-sizing: border-box; background-color: #f5f2eb; font-family: 'MyFont', cursive, serif; color: #333; font-size: 18px; line-height: 2;">
    <div class="letter-card" id="exportTarget" contenteditable="true" style="max-width: 600px; margin: 50px auto; padding: 60px 80px; background: #fff url() repeat; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); position: relative;">
        <div class="card-title" style="text-align: center;width:100%;font-size: 28px; color: #8b5a2b; margin-bottom: 30px; letter-spacing: 2px;">朋友圈快乐碎片</div>
        <div class="card-content">
            <p style="margin-bottom: 15px; padding-left: 10px; position: relative;">上班挣的不是工资，是"精神损失费"没错了。</p>
            <p style="margin-bottom: 15px; padding-left: 10px; position: relative;">老板画的饼太大，我噎得说不出话。</p>
            <p style="margin-bottom: 15px; padding-left: 10px; position: relative;">我的运动量：下楼拿外卖+床上翻身。</p>
            <p style="margin-bottom: 15px; padding-left: 10px; position: relative;">工资到账像富翁，打开还款软件变穷光蛋。</p>
            <p style="margin-bottom: 15px; padding-left: 10px; position: relative;">线上段子手，线下"哑巴新娘"实锤。</p>
            <p style="margin-bottom: 15px; padding-left: 10px; position: relative;">体重计总碰瓷我，明明是它不准。</p>
            <p style="margin-bottom: 15px; padding-left: 10px; position: relative;">没有咖啡的我，像只剩1%电的手机。</p>
            <p style="margin-bottom: 15px; padding-left: 10px; position: relative;">家里供不起我上班了，比上学还费钱。</p>
            <p style="margin-bottom: 15px; padding-left: 10px; position: relative;">我的人生：大型情景喜剧实录。</p>
            <p style="margin-bottom: 15px; padding-left: 10px; position: relative;">间接性踌躇满志，持续性混吃等死。</p>
            <p style="margin-bottom: 15px; padding-left: 10px; position: relative;">工作群一响，心跳先加速三秒。</p>
            <p style="margin-bottom: 15px; padding-left: 10px; position: relative;">记忆力堪比金鱼，刚想说啥来着？</p>
        </div>
    </div>

    <div class="btn-group" style="position: fixed; right: 40px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 15px;">
        <button class="func-btn" id="zoomIn" style="width: 55px; height: 55px; border-radius: 50%; border: 2px solid #8b5a2b; background-color: #fff; color: #8b5a2b; font-size: 22px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: all 0.3s; display: flex; align-items: center; justify-content: center;">+</button>
        <button class="func-btn" id="zoomOut" style="width: 55px; height: 55px; border-radius: 50%; border: 2px solid #8b5a2b; background-color: #fff; color: #8b5a2b; font-size: 22px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: all 0.3s; display: flex; align-items: center; justify-content: center;">-</button>
        <button class="func-btn export-btn" id="exportImg" title="导出长图" style="width: 55px; height: 55px; border-radius: 50%; border: 2px solid #8b5a2b; background-color: #fff; color: #8b5a2b; font-size: 20px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: all 0.3s; display: flex; align-items: center; justify-content: center;">↓</button>
    </div>

    <script>
        const zoomIn = document.getElementById('zoomIn'),
              zoomOut = document.getElementById('zoomOut'),
              exportImg = document.getElementById('exportImg');

        zoomIn.addEventListener('click', () => {
            const size = parseInt(getComputedStyle(document.body).fontSize);
            document.body.style.fontSize = `${size + 2}px`;
        });

        zoomOut.addEventListener('click', () => {
            const size = parseInt(getComputedStyle(document.body).fontSize);
            size > 14 && (document.body.style.fontSize = `${size - 2}px`);
        });

        exportImg.addEventListener('click', () => {
            html2canvas(document.getElementById('exportTarget'), { 
                scale: 2, 
                useCORS: true 
            }).then(canvas => {
                const link = document.createElement('a');
                link.download = '朋友圈搞笑文案.png';
                link.href = canvas.toDataURL('image/png');
                link.click();
            });
        });
    </script>
</body>
</html>